﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>错误明细</title>
	<style>
		#main {
			margin: 0 auto;
			width: 40%;
			background-color: rgba(255, 64, 0, .1);
			color: #fff;
			border-radius: 10px;
			margin-top: 60px;
			padding: 20px 10px;
			font-size:12px;
		}

		table {
			width: 100%;
			border-spacing: 10px 20px;
		}
		
		h1{
			color: rgba(0, 0, 255, .5);
			background-color:rgba(255,64,0,.5);
		}

		th {
			border-bottom: 2px solid #ccc;
		}

		td {
			text-align: left
		}

		tr td:first-child {
			text-align: right;
			font-weight: 700;
			width: 15%;
			font-size:16px;
			background-color:rgba(0, 0, 255, .2);
		}

		tr td:last-child{
			background-color:rgba(0,0,0	,.5);
		}

		h1 {
			text-align: center
		}

		input[type=text] {
			border-width: 0px 0px 2px 0px;
			border-color: black;
		}

		input:focus {
			border-color: red;
		}

		* {
			margin: 0;
			padding: 0;
		}

		body {
			width: 100%;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			background: -webkit-linear-gradient(left, #25c481, #25b7c4);
			background: linear-gradient(to right, #25c481, #25b7c4);
			font-family: 'Roboto', sans-serif;
		}

		#app {
			width: 100%;
			height: 100%;
			position: relative;
		}

		.bg {
			list-style: none;
			height: 200px;
			display: flex;
			position: absolute;
			top: calc(50% - 100px);
			z-index: -1;
		}

		.bg1 {
			left: 5%;
		}

		.bg2 {
			right: 5%;
		}

		.bg li {
			width: 20px;
			height: 20px;
			border-radius: 10px;
			background-color: #F44336;
			margin-right: 20px;
		}

		.bg li:nth-child(1) {
			background-color: #F44336;
			animation: love1 4s 0s infinite;
		}

		.bg li:nth-child(2) {
			background-color: #E91E63;
			animation: love2 4s .2s infinite;
		}

		.bg li:nth-child(3) {
			background-color: #9C27B0;
			animation: love3 4s .4s infinite;
		}

		.bg li:nth-child(4) {
			background-color: #673AB7;
			animation: love4 4s .6s infinite;
		}

		.bg li:nth-child(5) {
			background-color: #1976D2;
			animation: love5 4s .8s infinite;
		}

		.bg li:nth-child(6) {
			background-color: #FFEB3B;
			animation: love4 4s 1s infinite;
		}

		.bg li:nth-child(7) {
			background-color: #FF9800;
			animation: love3 4s 1.2s infinite;
		}

		.bg li:nth-child(8) {
			background-color: #FF5722;
			animation: love2 4s 1.4s infinite;
		}

		.bg li:nth-child(9) {
			background-color: #F44336;
			animation: love1 4s 1.6s infinite;
		}

		@keyframes love1 {

			30%,50% {
				height: 60px;
				transform: translateY(-30px);
			}

			70%,100% {
				height:0;
				transform:translateY(0);
			}
		}

		@keyframes love2 {

			30%,50% {
				height: 125px;
				transform: translateY(-60px);
			}

			70%,100% {
				height:0;
				transform:translateY(0);
			}
		}

		@keyframes love3 {

			30%,50% {
				height: 160px;
				transform: translateY(-75px);
			}

			70%,100% {
				height:0;
				transform:translateY(0);
			}
		}

		@keyframes love4 {

			30%,50% {
				height: 180px;
				transform: translateY(-60px);
			}

			70%,100% {
				height:0;
				transform:translateY(0);
			}
		}

		@keyframes love5 {

			30%,50% {
				height: 200px;
				transform: translateY(-45px);
			}

			70%,100% {
				height:0;
				transform: translateY(0);
			}
		}

		.btn {
			text-decoration: none;
			color: #fff;
			background-color: rgba(0, 0, 255, .2);
			padding: 5px 10px;
			border-radius: 5px;
			margin-left: 32px;
		}


		.btn:hover {
			background-color: rgba(0, 0, 255, .5);
			box-shadow: 0 0 5px 0 rgb(0, 0, 0);
		}
	</style>

</head>

<body>
	<div id="app">

		<ul class="bg bg1">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>

		<ul class="bg bg2">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>

		<div id="main">
			<h1>错误明细</h1>

			<table>
				<tbody>
					<tr>
						<td>发表人</td>
						<td>${wrong_detail.getUsername()}</td>
					</tr>
					<tr>
						<td>标题</td>
						<td>${wrong_detail.getTitle()}</td>
					</tr>
					<tr>
						<td>错误描述</td>
						<td>${wrong_detail.getAnswer()}</td>
					</tr>
					<tr>
						<td>错误图片</td>
						<td><img src="/imagesdir/${wrong_detail.getImg()}" width="300px" height="200px" /></td>
					</tr>
					<tr>
						<td>创建日期</td>
						<td>${wrong_detail.getCreatetime()}</td>
					</tr>
					<tr>
						<td>解决方式</td>
						<td>${wrong_detail.getDealtype()}</td>
					</tr>
					<tr>
						<td>解决时间</td>
						<td>${wrong_detail.getDealtime()}</td>
					</tr>
					<tr>
						<td>检索标签</td>
						<td>${wrong_detail.getTip()}</td>
					</tr>
				</tbody>
			</table>
			<a href="/ErrorRegister/edit?wrong_id=${wrong_detail.getId()}" class="btn">编辑</a>
			<a href="/ErrorRegister/list" class="btn">返回列表</a> 
			<a href="list" class="btn">我要评论</a>
		</div>
	</div>

</body>

</html>